{#
  This is used on the right hand side of the page as the ToC for larger viewports.
  Set `tocTitle` to ovverride default title of ToC.
#}
{% if tocContents %}
  <nav class="course__toc toc over-scroll hidden-yes lg:hidden-no" data-type="side" aria-label="{{ tocTitle if tocTitle else 'i18n.toc.toc' | i18n(locale) }}">
    <div class="course-toc__heading font-google-sans weight-medium">{{ tocTitle if tocTitle else 'i18n.toc.toc' | i18n(locale) }}</div>
    <web-scroll-spy>
      <div class="toc__wrapper flow-recursive">
        {{ tocContents | safe }}
      </div>
    </web-scroll-spy>
  </nav>
{% endif %}
